<!-- top站长结算量 -->
<template>
  <div id="chinaMap" style="min-height: 300px"></div>
</template>

<script>
    import 'echarts/map/js/china.js';
    export default {
        props: {
            maxValue:{
                default: 2000000
            },
            // 名称
            opinion: {
                type: Array,
                default(){
                    return []
                }
            },
            // 图表标题
            titleText: {
                type: String,
                default: ''
            },
            // 提示框标题
            seriesName: {
                type: String,
                default: ''
            },
            // 数据
            opinionData: {
                type: Array,
                default(){
                    return []
                }
            },
        },
        data(){
            return {
                //
            }
        },
        mounted(){
            this.drawMap();
        },
        methods: {
            // 绘制
            drawMap(){
                this.charts = this.$echarts.init(document.getElementById('chinaMap'));

                this.charts.setOption({
                    title: {
                        text: this.titleText,
                        x:'left'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    //参数待研究.........
                    /*visualMap: {
                        show : false,
                        x: 'left',
                        y: 'bottom',
                        splitList: [
                            {start: 500, end:600},{start: 400, end: 500},
                            {start: 300, end: 400},{start: 200, end: 300},
                            {start: 100, end: 200},{start: 0, end: 100},
                        ],
                        //color: ['#66CC33', '#00FF00', '#66FF33','#339900', '#33CC00', '#00CC00']
                    },*/
                    visualMap: {
                        show : false,
                        min: 0,
                        max: this.maxValue,
                        inRange: {
                            color: ['lightskyblue', 'yellow','orangered']
                        }
                    },
                    series: [{
                        name: '数据',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        data:this.opinionData
                    }]
                })
            },
            showload(){
                this.$echarts.init(document.getElementById('chinaMap')).showLoading({color:'#409eff'});
            },
            hideload(){
                this.$echarts.init(document.getElementById('chinaMap')).hideLoading();
            }
        }
    }
</script>